#{extends 'main.html' /}
#{set 'title'}&{'admin.roles.edit.page.title'}#{/set}

<div id="content">
	<div class="row">
		<div class="col-xs-12 col-sm-7 col-md-7 col-lg-4">
			<h1 class="page-title txt-color-blueDark">
				<i class="fa fa-table fa-fw "></i> 
				<a href="/admin/roles/all">&{'admin.roles.edit.page.title'}</a> <span>> &{'admin.roles.edit.breadcrumb'}</span>
			</h1>
		</div>
		<div class="col-xs-12 col-sm-5 col-md-5 col-lg-8">
			<ul id="sparks" class="">
				<li class="sparks-info">
					<button  data-target="#add-detail" class="btn btn-primary" data-toggle="modal">&{'admin.roles.edit.detail.button.permission.add'}</button>
				</li>
				<li class="sparks-info">
					<a href="/admin/roles/all" class="btn btn-default">&{'template.general.button.back'}</a>
				</li>
			</ul>
		</div>
	</div>

	<section id="widget-grid" class="">
		<article class="col-sm-12 col-md-12 col-lg-12">
			<div class="jarviswidget" id="wid-id-1" data-widget-colorbutton="false" data-widget-editbutton="false" data-widget-custombutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
					<h2>&{'admin.roles.edit.page.title'}</h2>
				</header>

				<div>
					<div class="widget-body no-padding">

						<form class="smart-form" method="POST" action="/admin/roles/update">
							<header>
								<h2>&{'admin.roles.edit.header'}</h2>
							</header>

							<fieldset>
								<section>
									<label class="label">&{'admin.roles.edit.form.label.name'}:</label>
									<label class="input">
										<input type="text" name="name" value="${role.name}" />
									</label>
								</section>
								<section>
									<label class="label">&{'admin.roles.edit.form.label.description'}:</label>
									<label class="input">
										<input type="text" name="description" value="${role.description}">
									</label>
								</section>
							</fieldset>
							<footer>
								<input type="hidden" name="roleId" value="${role.id}">
								<button type="submit" class="btn btn-primary">
									&{'admin.roles.edit.button.update'}
								</button>
							</footer>
						</form>
					</div>
				</div>
			</div>
		</article>

		<!-- LIST DETAILS -->
		<article class="col-sm-12 col-md-12 col-lg-12">
			<div class="jarviswidget jarviswidget-color-blueDark" id="wid-id-2" data-widget-colorbutton="false">
				<header>
					<span class="widget-icon"> <i class="fa fa-edit"></i> </span>
					<h2>&{'admin.roles.edit.detail.header'}</h2>
				</header>
				<div>
					<div class="widget-body">

						<div class="table-responsive">
							<table class="table table-bordered">
								<thead>
									<tr>
										<th>&{'admin.roles.edit.detail.table.header.module'}</th>
										<th>&{'admin.roles.edit.detail.table.header.page'}</th>
										<th>&{'admin.roles.edit.detail.table.header.permission'}</th>
										<th></th>
									</tr>
								</thead>
								<tbody>
									#{list items:role.pagePermissions, as:'pagePermission'}
										<tr>
											<td>${pagePermission.page.module.name}</td>
											<td>${pagePermission.page.name}</td>
											<td>${pagePermission.permission.name}</td>
											<td><a href="/admin/roles/remove-detail?roleId=${role.id}&pagePermissionId=${pagePermission.id}" class="btn btn-primary">&{'admin.roles.edit.detail.table.button.remove'}</a></td>
										</tr>
									#{/list}
								</tbody>
							</table>
						</div>
					</div>
				</div>
			</div>
		</article>
	</section>
</div>

<!-- MODAL FOR DETAILS-->
<div id="add-detail" class="modal fade">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
				<h4 class="modal-title">&{'admin.roles.edit.detail.popup.title'}</h4>
			</div>
			<div class="modal-body">
				<form class="smart-form" method="POST" action="/admin/roles/add-detail">
					<fieldset>
						<section>
							<label class="label">&{'admin.roles.edit.detail.popup.form.label.module'}:</label>
							<label class="select">
								<select name="permissionId">
									#{list items:modules, as:'module'}
									<option value="${module.id}">${module.name}</option>
									#{/list}
								</select>
								<i></i> 
							</label>
						</section>
					</fieldset>
					<fieldset>
						<section>
							<label class="label">&{'admin.roles.edit.detail.popup.form.label.page'}:</label>
							<label class="select">
								<select name="permissionId">
									#{list items:page, as:'page'}
									<option value="${page.id}">${page.name}</option>
									#{/list}
								</select>
								<i></i> 
							</label>
						</section>
					</fieldset>
					<fieldset>
						<section>
							<label class="label">&{'admin.roles.edit.detail.popup.form.label.permission'}:</label>
							<label class="select">
								<select name="pagePermissionId">
									#{list items:pagePermissions, as:'pagePermission'}
										<option value="${pagePermission.id}">${pagePermission.page.module.name} - ${pagePermission.page.name} - ${pagePermission.permission.name}</option>
									#{/list}
								</select>
								<i></i> 
							</label>
						</section>
					</fieldset>

					<footer>
						<input type="hidden" name="roleId" value="${role.id}">
						<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
						<button type="submit" class="btn btn-primary">
							&{'admin.users.edit.detail.popup.button.assign'}
						</button>
					</footer>
				</form>
			</div>
		</div>
	</div>
</div>